<template>
  <div>
    <el-form ref="columnForm" :model="model" size="small">
      <el-table :data="model.fieldList">
        <el-table-column label="字段名">
          <template v-slot="scope">
            <el-form-item :prop="'fieldList.' + scope.$index + '.javaField'"
                          :rules="[{required: true, message: '字段列名不能为空', trigger: 'blur'}]">
              <el-input v-model="scope.row.javaField" placeholder="请输入驼峰结构字段名"/>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="字段注释">
          <template v-slot="scope">
            <el-form-item :prop="'fieldList.' + scope.$index + '.label'"
                          :rules="[{required: true, message: '字段标签不能为空', trigger: 'blur'}]">
              <el-input v-model="scope.row.label" placeholder="请输入字段标签"/>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="字段类型">
          <template v-slot="scope">
            <el-form-item :prop="'fieldList.' + scope.$index + '.type'"
                          :rules="[{required: true, message: '字段类型不能为空', trigger: 'blur'}]">
              <el-select v-model="scope.row.type" style="width: 100%"
                         @change="(value) => handleFieldTypeChange(value, scope.row)">
                <el-option v-for="dict in fieldTypeList" :key="dict.value"
                           :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
<!--        <el-table-column label="字段长度">
          <template v-slot="scope">
            <el-form-item :prop="'fieldList.' + scope.$index + '.dbLength'">
              <el-input-number v-model="scope.row.dbLength" :disabled="!getLengthFlag(scope.row.type)"/>
            </el-form-item>
          </template>
        </el-table-column>-->
<!--        <el-table-column label="小数长度">
          <template v-slot="scope">
            <el-form-item :prop="'fieldList.' + scope.$index + '.dbPrecision'">
              <el-input-number v-model="scope.row.dbPrecision" :disabled="!getPrecisionFlag(scope.row.type)"/>
            </el-form-item>
          </template>
        </el-table-column>-->
        <el-table-column label="是否必填">
          <template v-slot="scope">
            <el-form-item :prop="'fieldList.' + scope.$index + '.dbNotNullFlag'"
                          :rules="[{required: true, message: '是否必填不能为空', trigger: 'blur'}]">
              <!--            <el-select v-model="scope.row.dbNotNullFlag"></el-select>-->
              <el-radio-group v-model="scope.row.dbNotNullFlag">
                <el-radio v-for="dict in $store.getters['auth/getDict']('sys_yes_no')" :key="dict.value"
                          :label="dict.value">{{ dict.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="是否查询">
          <template v-slot="scope">
            <el-form-item :prop="'fieldList.' + scope.$index + '.searchFlag'"
                          :rules="[{required: true, message: '是否查询不能为空', trigger: 'blur'}]">
              <!--            <el-select v-model="scope.row.dbNotNullFlag"></el-select>-->
              <el-radio-group v-model="scope.row.searchFlag">
                <el-radio v-for="dict in $store.getters['auth/getDict']('sys_yes_no')" :key="dict.value"
                          :label="dict.value">{{ dict.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template v-slot="scope">
            <el-form-item :prop="'fieldList.' + scope.$index + '.remarks'">
              <el-input v-model="scope.row.remarks" placeholder="请输入备注"/>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-form-item>
              <el-button type="danger" size="small" @click="deleteField(scope.$index)">删除</el-button>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div>
      <el-button @click="insertField">添加字段</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GenCodeFieldForm',
  props: {
    model: {
      type: Object,
      required: true
    }
  },
  computed: {
    fieldTypeList () {
      return this.$store.getters['auth/getDict']('gen_code_field_type')
    }
  },
  data () {
    return {}
  },
  methods: {
    getLengthFlag (value) {
      for (const each in this.fieldTypeList) {
        const dict = this.fieldTypeList[each]
        if (dict.value === value) return dict.lengthFlag
      }
      return false
    },
    getPrecisionFlag (value) {
      for (const each in this.fieldTypeList) {
        const dict = this.fieldTypeList[each]
        if (dict.value === value) return dict.precisionFlag
      }
      return false
    },
    handleFieldTypeChange (value, field) {
      for (const each in this.fieldTypeList) {
        const dict = this.fieldTypeList[each]
        if (dict.value === value) {
          // field.lengthFlag = dict.lengthFlag
          field.dbLength = dict.lengthFlag && field.dbLength ? field.dbLength : dict.lengthDefault
          // field.precisionFlag = dict.precisionFlag
          field.dbPrecision = dict.precisionFlag && field.dbPrecision ? field.dbPrecision : dict.precisionDefault
        }
      }
    },
    insertField () {
      const field = {
        field: '',
        dbField: null,
        type: '01',
        lengthFlag: false,
        dbLength: null,
        precisionFlag: false,
        dbPrecision: null,
        label: '',
        dbNotNullFlag: '0',
        searchFlag: '0',
        remarks: ''
      }
      this.handleFieldTypeChange(field.type, field)
      this.model.fieldList.push(field)
    },
    deleteField (index) {
      this.model.fieldList.splice(index, 1)
    },
    submitForm () {
      return new Promise((resolve, reject) => {
        this.$refs.columnForm.validate().then(() => {
          this.$http.postJson('/generator/code/save', { ...this.model }).then(({ data }) => {
            this.$override(this.model, data.data)
            resolve()
          }).catch((reason) => {
            reject(reason)
          })
        }).catch((reason) => {
          reject(reason)
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
